// window.onload = function() {
//     function waterfall() {
//         //获取瀑布流总体大盒子的宽度，分四列 ，求出每列宽度
//         var pubuBoxWidth = document.getElementsByClassName("pubuBox")[0].clientWidth;
//         const columns = 4;
//         var columnsWidth = pubuBoxWidth / columns;
//         //获取大/小盒子，动态在大盒子里边添加小盒子，并且将算出来的宽度给小盒子
//         var pubuBox = document.getElementsByClassName("pubuBox")[0];
//         // pubuBox.innerHTML = `<div class="item"><img src=""  alt="></div>`
//         var itemsWidth = document.getElementsByClassName("item").width = columnsWidth;
//         console.log(itemsWidth);
//         //获取所有的items， 让他们的高度等于照片上的高度
//         //设置一个数组
//         var arr = [];
//         $(".box .item").each(function(i) {
//             var height = $(this).find("img").height();
//             if (i < columns) {
//                 // 2 第一行按序布局
//                 $(this).css({
//                     top: 0,
//                     left: (itemsWidth) * i + 20 * i,
//                 });
//                 //将行高push到数组里边
//                 arr.push(height)

//             } else {
//                 //其他列 找到数组中的最小高度和它的索引
//                 var minHeight = arr[0];
//                 var index = 0;
//                 for (var j = 0; j < arr.length; j++) {
//                     if (minHeight > arr[j]) {
//                         minHeight = arr[j];
//                         index = j;
//                     }

//                 }
//                 //设置下一行第一个盒子的位置，top值就是最小的那个高度（minHeight）
//                 $(this).css({
//                     top: arr[index] + 30, //设置30的距离
//                     left: $(".box .item").eq(index).css("left")
//                 });
//                 //修改最小列的高度
//                 // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
//                 arr[index] = arr[index] + height + 30; //设置30的距离
//             }
//         });
//     }


//     $(".item").width(itemsWidth); //设置到item的宽度
//     var arr = [];
//     $(".box .item").each(function(i) {
//         var height = $(this).find("img").height();
//         if (i < columns) {
//             // 2 第一行按序布局
//             $(this).css({
//                 top: 0,
//                 left: (itemWidth) * i + 20 * i,
//             });
//             //将行高push到数组
//             arr.push(height);
//         } else {
//             // 其他行
//             // 3 找到数组中最小高度  和 它的索引
//             var minHeight = arr[0];
//             var index = 0;
//             for (var j = 0; j < arr.length; j++) {
//                 if (minHeight > arr[j]) {
//                     minHeight = arr[j];
//                     index = j;
//                 }
//             }
//             // 4 设置下一行的第一个盒子位置
//             // top值就是最小列的高度
//             $(this).css({
//                 top: arr[index] + 30, //设置30的距离
//                 left: $(".box .item").eq(index).css("left")
//             });

//             // 5 修改最小列的高度
//             // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
//             arr[index] = arr[index] + height + 30; //设置30的距离
//         }
//     });



//     // 页面尺寸改变时实时触发
//     window.onresize = function() {
//         //重新定义瀑布流
//         waterfall();
//     };
//     //应该调用，否则只写函数不调用 不会发生作用
//     waterfall();

// }


// function waterFall() {
//     // 1 确定图片的宽度 - 滚动条宽度
//     var pageWidth = getClient().width - 8;
//     var columns = 3; //3列
//     var itemWidth = parseInt(pageWidth / columns); //得到item的宽度
//     $(".item").width(itemWidth); //设置到item的宽度
//     var arr = [];
//     $(".box .item").each(function(i) {
//         var height = $(this).find("img").height();
//         if (i < columns) {
//             // 2 第一行按序布局
//             $(this).css({
//                 top: 0,
//                 left: (itemWidth) * i + 20 * i,
//             });
//             //将行高push到数组
//             arr.push(height);
//         } else {
//             // 其他行
//             // 3 找到数组中最小高度  和 它的索引
//             var minHeight = arr[0];
//             var index = 0;
//             for (var j = 0; j < arr.length; j++) {
//                 if (minHeight > arr[j]) {
//                     minHeight = arr[j];
//                     index = j;
//                 }
//             }
//             // 4 设置下一行的第一个盒子位置
//             // top值就是最小列的高度
//             $(this).css({
//                 top: arr[index] + 10, //设置30的距离
//                 left: $(".box .item").eq(index).css("left")
//             });

//             // 5 修改最小列的高度
//             // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
//             arr[index] = arr[index] + height + 30; //设置30的距离
//         }
//     });
// }
// //clientWidth 处理兼容性
// function getClient() {
//     return {
//         width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
//         height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
//     }
// }
// 页面尺寸改变时实时触发
// window.onresize = function() {
//     //重新定义瀑布流
//     waterFall();
// };
// //初始化
// window.onload = function() {
//     //实现瀑布流
//     waterFall();
// }

//创建一个新的函数waterFall
function waterFall() {
    // 1 确定图片的宽度（可以自己设置）:页面真实宽度减去某一数值（根据自己的需求来）
    var pageWidth = getClient().width - 315;

    //自己设置列数，改变数值即可实现
    var columns = 4; //4列
    //求列宽 使用parseInt（）来取整
    var itemWidth = parseInt(pageWidth / columns); //得到item的宽度
    // console.log(itemWidth);
    // var items = document.getElementsByClassName("item");
    // console.log(items);
    // for (a = 0; a < items.length; a++) {
    //     this.width = itemWidth;
    //     console.log(items[3].width);
    // }

    $(".item").width(itemWidth); //设置到item的宽度


    var arr = [];
    $(".box .item").each(function(i) {
        var height = $(this).find("img").height();
        if (i < columns) {
            // 2 第一行按序布局
            $(this).css({
                top: 0,
                left: (itemWidth) * i + 20 * i,
            });
            //将行高push到数组
            arr.push(height);
        } else {
            // 其他行
            // 3 找到数组中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
                if (minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            // 4 设置下一行的第一个盒子位置
            // top值就是最小列的高度
            $(this).css({
                top: arr[index] + 30, //设置30的距离
                left: $(".box .item").eq(index).css("left")
            });

            // 5 修改最小列的高度
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
            arr[index] = arr[index] + height + 30; //设置30的距离
        }
    });
}
//clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}
// 页面尺寸改变时实时触发
window.onresize = function() {
    //重新定义瀑布流
    waterFall();
};
//初始化
window.onload = function() {
    //实现瀑布流
    waterFall();
}